<template>
	<view class="container">
		<!-- 单词数量 -->
		<view class="word-num">
			<view id="chart-num" style="width: 100%; height: 700rpx;"></view>
			<view style="margin: 0 auto;width: 100%;text-align: center;margin-top: -60rpx;">
				<view style="font-weight: bold;font-size: 42rpx;">{{studyNum}}</view>
				<view>累计学习(词)</view>
			</view>
		</view>

		<!-- 学习时长 -->
		<view class="word-dur">
			<view id="chart-duration" style="width: 100%; height: 710rpx;"></view>
			<view style="margin: 0 auto;width: 100%;text-align: center;margin-top: -60rpx;">
				<view style="font-weight: bold;font-size: 42rpx;">{{duration}}</view>
				<view>累计学习(分)</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	import {
		getStudyData
	} from '@/api/user/user.js'
	export default {
		onReady() {
			// this.initChart();

		},
		onLoad() {
			this.getData();
		},
		data() {
			return {
				dataList: [],
				time: [],
				studyNum: 999,
				duration: 0,
			}
		},
		methods: {
			async getData() {
				await getStudyData().then(res => {
					console.log("dddddddddddd", res);
					this.dataList = res.data.data
					this.duration = res.data.allDuration

					this.studyNum = this.dataList[this.dataList.length - 1].studyNum
					console.log(this.dataList);
					this.time = this.dataList.map(item => item.endTime)
					console.log(this.time);
					this.initChart()
				})
			},

			initChart() {
				// 获取容器元素
				const chartNum = document.getElementById('chart-num');
				const chartDur = document.getElementById('chart-duration');
				// 初始化图表
				const myChartNum = echarts.init(chartNum);
				const myChartDur = echarts.init(chartDur);
				// 单词数量
				const numOption = {
					title: {
						text: '单词数量', // 标题文本内容
						left: 'left', // 标题水平位置，可取值 'left'、'center'、'right'
						top: 10, // 标题垂直位置，单位像素
						textStyle: { // 标题文本样式
							color: '#333333', // 文本颜色
							fontSize: 16, // 文本字体大小
							fontWeight: 'bold' // 文本粗细
						}
					},
					// 添加图例配置
					legend: {
						show: true, // 显示图例
						type: 'plain', // 普通图例
						data: ['单词数量'], // 图例的数据项，和系列名称对应
						right: 10,
					},
					xAxis: {
						type: 'category',
						data: this.time,
						axisLabel: {
							interval: 0
						}
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						name: '单词数量',
						data: this.dataList.map(item => item.studyNum),
						type: 'line',
						// 开启标签显示
						label: {
							show: true,
							position: 'top' // 标签位置在数据点上方，可按需调整，如 'bottom' 'left' 'right'
						}
					}]
				};
				// 学习时长
				const durOption = {
					title: {
						text: '学习时长', // 标题文本内容
						left: 'left', // 标题水平位置，可取值 'left'、'center'、'right'
						top: 10, // 标题垂直位置，单位像素
						textStyle: { // 标题文本样式
							color: '#333333', // 文本颜色
							fontSize: 16, // 文本字体大小
							fontWeight: 'bold' // 文本粗细
						}
					},
					// 添加图例配置
					legend: {
						show: true, // 显示图例
						type: 'plain', // 普通图例
						data: ['时长'], // 图例的数据项，和系列名称对应
						right: 10,
					},
					xAxis: {
						type: 'category',
						data: this.time,
						axisLabel: {
							interval: 0
						}
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						name: '时长',
						data: this.dataList.map(item => item.studyDuration),
						type: 'bar',
						// 开启标签显示
						label: {
							show: true,
							position: 'top' // 标签位置在数据点上方，可按需调整，如 'bottom' 'left' 'right'
						}
					}]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChartNum.setOption(numOption);
				myChartDur.setOption(durOption);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		// height: 100vh;
		background: $uni-bg-color-page;
		padding: 20rpx;
	}

	.word-num {
		padding-top: 20rpx;
		padding-left: 10rpx;
		padding-bottom: 20rpx;
		border-radius: 20rpx;
		background: #ffffff;

	}

	.word-dur {
		margin-top: 40rpx;
		padding-top: 20rpx;
		padding-left: 10rpx;
		border-radius: 20rpx;
		padding-bottom: 20rpx;
		background: #ffffff;
	}
</style>